<?php
get_header();
?>
<div id="main-content" class="main-content chiasekinhnghiem-page">
    <div id="primary" class="content-area pagewidth">
        <div class="menu-chiasekinhnghiem">
            <a href="<?php echo get_post_type_archive_link( 'diengia' ); ?>" class="current-mn-gt"><img src="<?php echo get_template_directory_uri(); ?>/images/text-diengiahtkn-atc.png" /></a>
            <a href="<?php echo get_post_type_archive_link( 'kinhnghiem' ); ?>" ><img src="<?php echo get_template_directory_uri(); ?>/images/text-kinhnghiemtkn.png" /></a>

        </div>


        <div id="content" class="site-content" role="main">
            <div class="page-content">
                <ul class="danhsachdiengia">
                    <?php
                    $i = 0;
                    query_posts('post_type=diengia;');
                    while (have_posts()) : the_post();
                        if ($i == 0 || $i % 4 == 0) {
                            echo '<li>';
                        }
                        ?>                      
                        <div class="item-diengia">
                            <a href="#diengia_<?php echo get_the_ID(); ?>" class="diengia_<?php echo get_the_ID(); ?>">
                                <?php
                                if (has_post_thumbnail()) { // check if the post has a Post Thumbnail assigned to it.
                                    $attr = array(
                                        'class' => "anhdiengia",
                                    );
                                    the_post_thumbnail(array(255, 255), $attr);
                                }
                                ?>
                            </a>
                            <div class="thongtin">
                                <div class="tendiengia"><?php the_title(); ?></div>
                                <div class="congty"><?php echo get_post_meta(get_the_ID(), 'wit_diengialocation_congty', true); ?></div>
                                <div class="diadiem"><span class="icon-location"></span>  <?php echo get_post_meta(get_the_ID(), 'wit_diengialocation', true); ?></div>

                            </div>
                            <div class="gioithieudiengia">
                                <?php echo get_the_excerpt(); ?> (<a href="<?php echo get_permalink(get_the_ID()); ?>">Xem chi tiết</a>)<br/>

                            </div>
                        </div>

                        <?php
                        if ($i == 0 || $i % 4 == 0) {
                            echo '</li>';
                        }
                        $i++;
                    endwhile;
                    ?>

                </ul>
                <?php
                query_posts('post_type=diengia;');
                while (have_posts()) : the_post();
                    ?>   
                    <div class="item-diengia" style="display:none">
                        <!-- Chi tiet dien gia 1-->
                        <div id="diengia_<?php echo get_the_ID(); ?>" >
                            <div class="item-diengia">
                                <a href="#diengia_<?php echo get_the_ID(); ?>" class="diengia_<?php echo get_the_ID(); ?>">
                                    <?php
                                    if (has_post_thumbnail()) { // check if the post has a Post Thumbnail assigned to it.
                                        $attr = array(
                                            'class' => "anhdiengia",
                                            'style' => "width:105px; height: 105px;",
                                        );
                                        the_post_thumbnail('post-thumbnail', $attr);
                                    }
                                    ?>
                                </a>
                                <div class="thongtin">
                                    <div class="tendiengia"><?php the_title(); ?></div>
                                    <div class="congty"><?php echo get_post_meta(get_the_ID(), 'wit_diengialocation_congty', true); ?></div>
                                    <div class="diadiem"><span class="icon-location"></span>  <?php echo get_post_meta(get_the_ID(), 'wit_diengialocation', true); ?></div>

                                </div>
                                <div class="gioithieudiengia">
                                    <?php echo get_the_content(); ?>
                                </div>
                            </div>
                        </div>
                        <!-- Chi tiet dien gia 1-->
                    </div>
                    <!-- Chi tiet dien gia -->
                <?php endwhile; ?>
            </div>
        </div><!-- #content -->

    </div><!-- #primary -->
</div><!-- #main-content -->

<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.js"></script>

<!-- bxSlider Javascript file -->
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="<?php echo get_template_directory_uri(); ?>/jquery.bxslider.css" rel="stylesheet" />
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/popup.css">
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.popup.min.js"></script>
<script>

    $(document).ready(function() {
        $('.danhsachdiengia').bxSlider({controls: false});
<?php
query_posts('post_type=diengia;');
while (have_posts()) : the_post();
    ?>
            $('.diengia_<?php echo get_the_ID(); ?>').popup({
                content: $('#diengia_<?php echo get_the_ID(); ?>'),
                type: 'html',
                width: 624
            });
    <?php
endwhile;
?>
    });

</script>
<?php get_footer(); ?>